<script setup>

    import {onMounted, ref} from 'vue'
    import { deviceFilterStatusGetService, deviceStatusGetService } from '@/api/device';
    import { convertDateTimeArrayToString, getDateTimeString } from '../../utils/date';
    import { orderPageQueryService } from '../../api/order';
    import * as echarts from 'echarts';
import { deviceStatusRecordGetService } from '../../api/device';

    const {deviceData} = defineProps({
    deviceData: {
        type: Object,
        required: true
    }
    })

    const deviceStatus = ref({})
    const filterStatus = ref({})
    const orderHistory = ref({
        total: 0,
        records: []
    })

    const orderPageQueryData = ref({
        page: 1,
        pageSize: 10,
        id: null,
        userId: null,
        deviceId: null,

    })
    
    const getDeviceStatus = async () =>{
        let result = await deviceStatusGetService(deviceData.id)
        deviceStatus.value = result.data
        deviceStatus.value.updateTime = getDateTimeString(deviceStatus.value.updateTime)
        
    }

    const getDeviceFilterStatus = async () =>{
        let result = await deviceFilterStatusGetService(deviceData.id)
        filterStatus.value = result.data
        let list = filterStatus.value.statusItemList
        for(let i = 0;i < list.length; i++) {
            list[i].installTime = getDateTimeString(list[i].installTime)
            list[i].overTime = getDateTimeString(list[i].overTime)
        }
        filterStatus.value.statusItemList = list
    }

    const getOrderHistory = async () => {
        orderPageQueryData.value.deviceId = deviceData.id
        let result = await orderPageQueryService(orderPageQueryData.value)
        orderHistory.value = result
        let list = orderHistory.value.records
        for(let i = 0;i < list.length; i++) {
            list[i].createTime = getDateTimeString(list[i].createTime)
            list[i].updateTime = getDateTimeString(list[i].updateTime)
        }
        
    }

    getDeviceStatus()
    if(deviceData.type === 'maker')
        getDeviceFilterStatus()
    if(deviceData.type === 'drinker')
        getOrderHistory()

    // 分页大小改变时重新分页查询
    const handleSizeChange = (val) => {
        orderPageQueryData.value.pageSize = val
        getOrderHistory()
    }
    // 分页页码改变时重新分页查询
    const handleCurrentChange = (val) => {
        orderPageQueryData.value.page = val
        getOrderHistory()
    }

    const statusRecordData = ref({})
    const statusRecordQueryData = ref({
        deviceId: null,
        statusName: null,
        axisName: null,
        startTime: null,
        endTime: null
    })

    const statisticAxis = ref(['1', '2'])
    const statisticData = ref(['开', '关'])
    const statisticTitle = ref('未选中查询条例')

    const refreshStatistic = (row) =>{
        let statusName = row.name
        let axisName = "createTime"
        //console.log('refresh')
        statisticTitle.value = `${row.displayName} 统计信息`
        getStatusRecord(statusName, axisName)

    }

    const getStatusRecord = async (statusName, axisName) =>{
        let startDate = new Date()
        startDate.setDate(startDate.getDate() - 7)
        statusRecordQueryData.value = {
            deviceId: deviceData.id,
            statusName: statusName,
            axisName: axisName,
            startTime: convertDateTimeArrayToString(startDate),
            endTime: convertDateTimeArrayToString(new Date())
        }
        console.log(statusRecordQueryData.value.startTime)
        
        let result = await deviceStatusRecordGetService(statusRecordQueryData.value)
        statisticAxis.value = result.data.axis
        statisticData.value = result.data.data
        for(let i = 0;i < statisticAxis.value.length; i++){
            statisticAxis.value[i] = getDateTimeString(statisticAxis.value[i])
        }
        initStatisticChart()
    }

    const initStatisticChart = () => {
        var chartDom = document.getElementById('statistic-chart');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
        title: {
            text: statisticTitle.value
        },
        xAxis: {
            type: 'category',
            data: statisticAxis.value
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: statisticData.value,
            type: 'line',
            smooth: true
            }
        ]
        };

        option && myChart.setOption(option);
    
    }


    onMounted(()=>{
        initStatisticChart()
    })

</script>


<template>
    <div class="container">
        <el-scrollbar>
            <el-card class="device-info">
                <template #header>
                    <div class="header">
                        <span>设备信息</span>
                    </div>
                </template>
                <el-descriptions title="基本信息" class="device-info-item">
                    <el-descriptions-item label="ID">{{ deviceData.id }}</el-descriptions-item>
                    <el-descriptions-item label="名称">{{ deviceData.name }}</el-descriptions-item>
                    <el-descriptions-item label="类型"> <el-tag size="small">{{ deviceData.typeName }} </el-tag> </el-descriptions-item>
                    <el-descriptions-item label="所属片区"> {{ deviceData.districtName }} </el-descriptions-item>
                    <el-descriptions-item label="父设备ID">
                        {{ (deviceData.parentId !== null ? deviceData.parentId : '/') }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>

            <div class="status-and-statistic">
                <el-card class="statistic-data">
                    <template #header>
                        <div class="header">
                            <span>统计信息</span>
                        </div>
                    </template>
                    <div class="statistic-charts">
                        <div class="statistic-chart-item">
                            <span id="statistic-chart" style="width:760%; height: 400px;"></span>
                        </div>
                    </div>
                </el-card>
                
                <el-card class="device-status" style="width:40%;">
                    <template #header>
                        <div class="header">
                            <span>水质信息</span>
                        </div>
                    </template>
                    <div class="device-info-item"><span>状态:</span> {{ deviceStatus.status }}</div>
                    <div class="device-info-item"><span>故障: </span>{{ deviceStatus.fault }}</div>
                    <div class="device-info-item"><span>更新时间: </span>{{ deviceStatus.updateTime }}</div>
                    <!-- 设备水质信息表格 -->
                    <el-table :data="deviceStatus.statusItemList" class="device-status-list" highlight-current-row  @current-change="refreshStatistic" max-height="250px">
                        <el-table-column prop="name" label="项目" sortable />
                        <el-table-column prop="displayName" label="名称" sortable />
                        <el-table-column prop="value" label="值" sortable />
                        <el-table-column prop="standardValue" label="标准值" sortable />
                    </el-table>
                    
                </el-card>
            </div>

            <el-card class="filter-status" v-if="deviceData.type === 'maker'">
                <template #header>
                    <div class="header">
                        <span>滤芯状态</span>
                    </div>
                </template>
                <!-- 设备水质信息表格 -->
                <el-table :data="filterStatus.statusItemList" style="width: 100%">
                    <el-table-column prop="name" label="项目" sortable />
                    <el-table-column prop="displayName" label="名称" sortable />
                    <el-table-column prop="status" label="状态" sortable />
                    <el-table-column prop="installTime" label="安装时间" sortable />
                    <el-table-column prop="overTime" label="过期时间" sortable />
                </el-table>
            </el-card>

            <el-card class="order-history" v-if="deviceData.type === 'drinker'">
                <template #header>
                    <div class="header">
                        <span>用水记录</span>
                    </div>
                </template>
                <!-- 设备水质信息表格 -->
                <el-table :data="orderHistory.records" style="width: 100%">
                    <el-table-column prop="id" label="ID" sortable />
                    <el-table-column prop="userId" label="用户名" sortable />
                    <el-table-column prop="deviceId" label="设备ID" sortable />
                    <el-table-column prop="waterAmount" label="出水量(ml)" sortable />
                    <el-table-column prop="waterTpr" label="出水温度(℃)" sortable />
                    <el-table-column prop="cost" label="消费(元)" sortable />
                    <el-table-column prop="createTime" label="创建时间" sortable />
                </el-table>
                <!-- 页码切换组件 -->
                <div class="pagination-block">
                    <el-pagination
                        layout="prev, pager, next, sizes"
                        :total="orderHistory.total"
                        :page-size="orderPageQueryData.pageSize"
                        v-model:current-page="orderPageQueryData.page"
                        v-model:page-size="orderPageQueryData.pageSize"
                        :page-sizes="[5, 10, 20, 50]"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </el-card>
        </el-scrollbar>
       
    </div>
</template>

<style scoped>

    .device-info {
       margin-bottom: 32px;
    }

    .device-status {
       margin: 32px 0;
    }

    .filter-status {
       margin: 32px 0;
    }

    .statistic-data {
       margin: 32px 0;
    }

    .device-status-list {
       margin: 32px 0;
    }
    .device-info-item  {
        width: 70%;
    }

    .statistic-charts {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .status-and-statistic{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 48px;
        height: 500px;
    }
</style>